<template>
	<div>
		<div class="toolbar mt-2">
			<a-tabs v-model:activeKey="status" @change="current=1">
				<a-tab-pane :key="0" tab="待审批"></a-tab-pane>
				<!--
				<a-tab-pane :key="1" tab="审批中"></a-tab-pane>
				-->
				<a-tab-pane :key="2" tab="已审批"></a-tab-pane>
				<a-tab-pane :key="-1" tab="驳回"></a-tab-pane>
			</a-tabs>

			<a-form ref="searchRef" :model="searchState" :label-col="{style: { width: '80px' }}" @finish="current=1">
				<a-row :gutter="20">
					<a-col :md="12" :lg="8" :xl="6">
						<a-form-item label="名称" class="mb-0">
							<a-input v-model:value="searchState.name" placeholder="请输入" allow-clear></a-input>
						</a-form-item>
					</a-col>

					<a-col :md="12" :lg="8" :xl="6">
						<a-form-item label="审批类型" class="mb-0">
							<a-select v-model:value="searchState.module_id" placeholder="请选择审批类型" allow-clear>
								<a-select-option v-for="(item) in workflowModuleOptions" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>

					<a-col :md="12" :lg="8" :xl="6">
						<a-form-item label="申请人" class="mb-0">
							<a-input v-model:value="searchState.create_user_fullname" placeholder="请输入" allow-clear></a-input>
						</a-form-item>
					</a-col>

					<a-col :md="12" :lg="8" :xl="6">
						<a-space>
							<a-button type="primary" html-type="submit">
								<search-outlined />搜索
							</a-button>
						</a-space>
					</a-col>
				</a-row>
			</a-form>
		</div>

		<div class="container mt-2">
			<a-table :columns="columns" :scroll="tableScroll" :expanded-row-keys="expandedRowKeys" row-key="id" :data-source="dataSource" :pagination="pagination" :loading="loading" :row-selection="rowSelection" @change="(pag) => {current=pag.current}" @expanded-rows-change="expandedRowsChange ">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'operation'">
						<a-space>
							<a-button type="link" @click="handleAudit(record)">
								<file-protect-outlined />
								{{ [-1, 2].includes(record.status) ? '详情' : '审批' }}
							</a-button>
						</a-space>
					</template>

					<template v-else-if="column.key === 'nodes'">
						<ol>
							<li v-for="item in record.nodes" :key="item.id">
								<dl>
									<dt>{{ item.name }}</dt>
									<dd>
										<a-tag v-for="role in item.roles" :key="role.id">{{ role.name }}</a-tag>
									</dd>
								</dl>
							</li>
						</ol>
					</template>
				</template>
			</a-table>
		</div>
	</div>
</template>

<script setup lang="jsx">
import dayjs from 'dayjs';
import { ref, computed } from "vue";
import { SearchOutlined, FileProtectOutlined } from "@ant-design/icons-vue";

const status = ref(0);

const searchRef = ref();
const searchState = ref({});

const columns = [
	{
		title: "ID",
		dataIndex: "id",
		width: 60,
		fixed: "left"
	},
	{
		title: "名称",
		dataIndex: "name",
		width: 300,
		fixed: "left"
	},
	{
		title: "审批类型",
		dataIndex: ['module', "name"],
		width: 160
	},
	{
		title: "提交时间",
		dataIndex: "create_time",
		width: 180,
		align: 'center',
		customRender: ({ text }) => {
			return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
		}
	},
	{
		title: "申请人",
		dataIndex: ['create_user', "fullname"],
		width: 160
	},
	{
		title: "状态",
		dataIndex: "status",
		width: 120,
		align: 'center',
		customRender: ({ text }) => {
			return <a-tag>{({
				"-9": "未提交",
				"-1": "驳回",
				//已提交（待审批）
				0: "待审批",
				1: "审批中",
				2: "通过"
			})[text]}</a-tag>;
		}
	},
	{},
	{
		title: "操作",
		key: "operation",
		sorter: false,
		fixed: "right",
		width: 120,
		align: "center"
	}
];

const tableScroll = computed(() => ({
	x: document.documentElement.clientWidth - 250
}));

const expandedRowKeys = ref([]);
const expandedRowsChange = e => {
	expandedRowKeys.value = e;
};
const rowSelection = ref();

import { post } from "../utils";

const workflowModuleOptions = ref();
post('workflow/module', {
	page_size: 1 / 0
}).then(({ data }) => {
	workflowModuleOptions.value = data;
});

import { usePagination } from "vue-request";
const { data, loading, run, current, pageSize, total } = usePagination(params => post("workflow", { ...params, status: status.value, ...searchState.value }), {
	defaultParams: [
		{
			page_size: 10
		}
	],
	pagination: {
		currentKey: "page",
		pageSizeKey: "page_size",
		totalKey: "total"
	}
});
const dataSource = computed(
	() => data.value?.data || []
);

const pagination = computed(() => ({
	total: total.value,
	current: current.value,
	pageSize: pageSize.value
}));

/*
const initData = (pag, filters, sorter) => {
	pag = Object.assign(
		{
			current: current.value,
			pageSize: pageSize.value
		},
		pag || {}
	);
	filters = {
		...filters,
		...searchState
	};

	run({
		page_size: pag?.pageSize,
		page: pag?.current,
		sort_field: sorter?.field,
		sort_order: sorter?.order,
		...filters
	});
};
*/

import { useRouter } from "vue-router";
const router = useRouter();

const handleAudit = (text) => {
	const { target_id: id, module: { route_path }} = text;
	if (route_path) {
		// router.push({
		// 	path: ((params) => route_path.replace(/:(\w+)/g, (match, key) => {
		// 		return params[key] || match;
		// 	}))({
		// 		id
		// 	})
		// })
		router.push(((params) => route_path.replace(/:(\w+)/g, (match, key) => {
			return params[key] || match;
		}))({
			id
		}))
	}
}
</script>

<style scoped lang="scss">
.toolbar,
.container {
	padding: 12px;
	background: #fff;
}
</style>